<template>
  <div
    :class="{ panel: true, 'panel--ready': isReady }"
    @mousemove="onMouseMove"
  >
    <div class="panel-left"></div>
    <div class="canvas">
      <ModelShower :rotate="rotate" :src="$attrs.src" />
    </div>
  </div>
</template>
<script>
import ModelShower from '@/components/ModelShower'
import { ref } from '@vue/reactivity'
export default {
  components: {
    ModelShower
  },
  setup() {
    const rotate = ref([0, 0])
    const isReady = ref(false)
    return {
      rotate,
      isReady
    }
  },
  methods: {
    onReady() {
      this.isReady = true
    },
    onMouseMove(e) {
      const width = window.innerWidth
      const height = this.$el.clientHeight
      let rotateX = 0.5 + (e.offsetX / width) * -0.5
      let rotateY = 0.5 + (e.offsetY / height) * -0.5
      this.rotate[0] = rotateX
      this.rotate[1] = rotateY
    }
  },
  mounted() {
    setTimeout(() => {
      this.onReady()
    }, 500)
  }
}
</script>
<style lang="less" scoped>
.panel {
  @apply w-3/4 flex justify-center px-10 mx-auto opacity-0;
}
.panel-left {
  @apply flex-1;
}
.canvas {
  @apply pr-10 pointer-events-none;
}
.panel--ready {
  animation: fadeInTop 0.8s forwards;
}
</style>
